<template>
  <div
    class="navigation"
    :class="{ scroll_active: isScrollActive }"
    @click.stop="openSub"
  >
    <div class="navigation_ball">
      <svg class="icon guanbi" aria-hidden="true" v-if="isOpen">
        <use xlink:href="#icon-guanbi"></use>
      </svg>
      <div v-else>{{ scrollNum }}%</div>
    </div>
    <ul :class="{ submenu_active: isOpen }" class="navigation_submenu">
      <li @click.stop="backTop">
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fanhuidingbu"></use>
          </svg>
        </span>
      </li>
      <li>
        <span @click.stop="backHome">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouye"></use>
          </svg>
        </span>
      </li>
      <li>
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'
  let scrollNum = ref(0)
  let isScrollActive = ref(false)
  let scrollTimer = ref(null)
  let isOpen = ref(false)
  const router = useRouter()

  onMounted(() => {
    window.addEventListener('scroll', scrollHandle)
  })
  onUnmounted(() => {
    window.removeEventListener('scroll', scrollHandle)
  })
  const scrollHandle = () => {
    clearTimeout(scrollTimer)
    scrollNum.value = (
      (window.pageYOffset /
        (document.documentElement.scrollHeight - window.innerHeight)) *
      100
    ).toFixed(0)
    isScrollActive.value = true
    scrollTimer = setTimeout(() => {
      isScrollActive.value = false
    }, 700)
  }

  const openSub = () => {
    isOpen.value = !isOpen.value
  }

  // backTop
  const backTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    })
  }

  const backHome = () => {
    router.push('/home')
  }
</script>

<style lang="less" scoped>
  .navigation {
    position: fixed;
    right: 16px;
    bottom: 16px;
    border-color: var(--background-primary);
    border-radius: 9999px;
    border-width: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-size: 24px;
    line-height: 32px;
    --tw-shadow: 0 10px 15px -3pxrgba (0, 0, 0, 0.1),
      0 4px 6px -2pxrgba (0, 0, 0, 0.05);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    stroke-width: 0;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
    width: 48px;
    z-index: 999;
    transition: all 0.55s cubic-bezier(0, 1.8, 1, 1.2);
    opacity: 1;
    .navigation_submenu {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      li {
        position: absolute;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 2px;
        opacity: 0;
        transition: all 0.55s cubic-bezier(0, 1.8, 1, 1.2);
        background: linear-gradient(
          130deg,
          rgb(36, 198, 220),
          rgb(84, 51, 255) 41.07%,
          rgb(255, 0, 153) 76.05%
        );
        span {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 100%;
          background-color: var(--background-secondary);
          border-radius: 9999px;
        }
      }
    }
    .submenu_active {
      li {
        opacity: 1;
        &:first-of-type {
          transform: translateX(calc(56px * -1.8));
        }
        &:nth-of-type(2) {
          transform: translate(calc(56px * -1.2), calc(56px * -1.2));
        }
        &:nth-of-type(3) {
          transform: translateY(calc(56px * -1.8));
        }
        &:nth-of-type(4) {
          transform: translateY(calc(3rem * -2.3));
        }
      }
    }
    .navigation_ball {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
      background-color: var(--background-secondary);
      padding: 2px;
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 12px 28px rgb(0 0 0 / 20%);
      z-index: 200;
      border-radius: 9999px;
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 41.07%,
        rgb(255, 0, 153) 76.05%
      );
      font-size: 14px;
      color: var(--text-bright);
    }
  }
  .scroll_active {
    transform: translateX(calc(48px * 0.5));
    opacity: 0.6;
  }
</style>
